<template>
    <pane-module :title="title">
        <template slot="content">
            <ul class="module-content article-list" ga_event="click_hot_news">
                <li v-for="item in listCount" class="article-item">
                    <a :href="item.open_url" target="_blank" class="news-link">
                        <div v-if="item.image_url" class="module-pic news-pic">
                            <img v-lazy="item.image_url">
                        </div>
                        <div class="news-inner">
                            <p class="module-title">{{ item.title }}</p>
                        </div>
                    </a>
                </li>
            </ul>
        </template>
    </pane-module>
</template>

<style lang="less">
    @import "./hotNews.less";
</style>

<script>
  import PaneModule from 'byted-toutiao-pc-business-components/components/pane'

  export default {
    name: 'HotNews',
    props: {
      list: Array,
      count: {
        type: Number,
        default: 4
      },
      title: String
    },
    computed: {
      listCount: function (count) {
        return this.list.slice(0, this.count)
      }
    },
    components: {
      PaneModule
    }
  }
</script>



// WEBPACK FOOTER //
// hotNews.vue?0992825c